<template>
  <div class="app">
    <div class="control-window">
      <div class="control-window__toolbar">
        <div class="tab__tags">
          <div class="tab__tags__item active">
            <svg-icon icon-class="signal" class-name="signal-icon"/>
            <span>{{formatIdentifierCode(store.getters.controlled_hosts[0])}}</span>
            <svg-icon icon-class="close" class-name="tab-close-icon" @click="closeControlWin"></svg-icon>
          </div>
          <div class="plus-icon-box"><svg-icon icon-class="plus" class-name="plus-icon" @click="showMainWin"></svg-icon></div>
        </div>
        <div class="control-window__toolbar__drag" style='-webkit-app-region:drag; -webkit-user-select: none;'></div>
        <div class="control-window__toolbar__right">
          <svg-icon icon-class="close" class-name="close-icon" @click="closeControlWin"/>
          <svg-icon icon-class="maximize" class-name="maximize-icon" @click="maximizeControlWin"/>
          <svg-icon icon-class="minimize" class-name="minimize-icon" @click="minimizeControlWin"/>
        </div>
        <div class="drop-down-box" v-if="drop_down_visible">
          <div class="drop-down-box__item">
            <svg-icon icon-class="full-screen" class-name="full-screen-icon"></svg-icon>
            <span>全屏</span>
          </div>
          <div class="drop-down-box__item">
            <svg-icon icon-class="stretch" class-name="stretch-icon"></svg-icon>
            <span>缩放</span>
          </div>
          <div class="drop-down-box__item">
            <svg-icon icon-class="chat" class-name="chat-icon"></svg-icon>
            <span>聊天</span>
          </div>
          <div class="drop-down-box__item">
            <svg-icon icon-class="voice" class-name="voice-icon"></svg-icon>
            <span>语音</span>
          </div>
          <div class="drop-down-box__item">
            <svg-icon icon-class="whiteboard" class-name="whiteboard-icon"></svg-icon>
            <span>白板</span>
          </div>
          <div class="drop-down-box__item">
            <svg-icon icon-class="record" class-name="record-icon"></svg-icon>
            <span>录像</span>
          </div>
          <div class="drop-down-box__item">
            <svg-icon icon-class="screenshot" class-name="screenshot-icon"></svg-icon>
            <span>截屏</span>
          </div>
          <div class="drop-down-box__item">
            <svg-icon icon-class="more" class-name="more-icon"></svg-icon>
            <span>更多</span>
          </div>
          <svg-icon
            icon-class="down"
            class-name="drop-down-box__hidden-button"
            @click="drop_down_visible = false"
          ></svg-icon>
        </div>
        <svg-icon
          icon-class="down"
          class-name="drop-down-button"
          @click="drop_down_visible = true"
          v-if="drop_down_visible===false"
        ></svg-icon>
      </div>

      <div class="control-window__main">
        <div class="tab__content" id="screen-video-container">
          <!-- 以后tab__content会做成tab组件的content部分, 这里可以接受复数的孩子, 孩子在此的索引与tab tag的索引对应 -->
          <video id="screen-video" autoplay playsinline></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, ref, watch} from "vue";
import {useStore} from "vuex";

import {initPeerControl} from './app';
import {formatIdentifierCode} from "../../../../utils/string-util";

export default {
  name: 'App',
  setup(){
    const store = useStore();
    const CONTROLLED_HOSTS = ref(store.getters.controlled_hosts);
    const drop_down_visible = ref(false);

    onMounted(() => {
      initPeerControl((code) => {
        store.dispatch('app/setControlledHosts',code + '');
      });
    });

    const closeControlWin = ()=> window.electron.closeControlWin();
    const maximizeControlWin = ()=> window.electron.maximizeControlWin();
    const minimizeControlWin = ()=> window.electron.minimizeControlWin();
    const showMainWin = () => {
      window.electron.showMainWin()
    };

    return {
      closeControlWin,
      maximizeControlWin,
      minimizeControlWin,
      store,
      formatIdentifierCode,
      showMainWin,
      drop_down_visible
    }
  }
}
</script>

<style lang="scss">
@import "variables";

.control-window {
  background: #000;
  border: 1px solid rgb(67, 67, 67);

  &__toolbar {
    background: #000;
    height: $toolBarHeight;
    border-bottom: 1px solid rgb(31, 31, 31);
    display: flex;
    position: relative;

    .tab__tags {
      display: flex;
      align-items: center;

      &__item {
        font-size: 13px;
        color: rgb(143, 143, 143);
        line-height: 32px;
        width: 160px;
        display: flex;
        align-items: center;

        &.active {
          background: rgb(31, 31, 31);
        }

        span {
          vertical-align: -2px;
          flex-grow: 1;
        }

        .signal-icon {
          color: rgb(40, 202, 65);
          font-size: 11px;
          margin-left: 9px;
          margin-right: 3px;
          cursor: pointer;
        }

        .tab-close-icon {
          color: rgb(96, 96, 96);
          font-size: 9px;
          margin-right: 14px;
          cursor: pointer;
        }
      }

      .plus-icon-box {
        margin-left: 8px;
        height: 26px;
        line-height: 26px;
        padding: 0 7px;
        border-radius: 4px;

        &:hover {
          background: rgb(41, 41, 41);
        }

        .plus-icon {
          font-size: 12px;
          color: #ffffff; //todo emmm 还是有点暗
        }
      }
    }

    &__drag {
      flex-grow: 1;
    }

    &__right {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;

      & > svg {
        box-sizing: initial;
        color: rgb(179, 179, 179);
        padding: 0 14px;
        font-size: 12px;
        height: 32px !important;

        &:hover {
          cursor: pointer;
          background: #292929;
        }

        &.close-icon:hover {
          background: #ff0042;
          fill: #f3f2f2;
        }
      }
    }

    @mixin drop-down_button() {
      position: absolute;
      color: rgb(213, 213, 213);
      background: rgb(51, 51, 51);
      font-size: 12px;
      width: 40px !important;
      height: 13px !important;
      left: 50%;
      transform: translate(-50%, 0);
      &:hover {
        background: rgb(60, 60, 60);
      }
    }

    .drop-down-box {
      position: absolute;
      height: 60px;
      top: $toolBarHeight;
      width: 100%;
      background: rgb(31, 31, 31);
      z-index: 1;
      display: flex;
      align-items: center;

      &__item {
        width: 50px;
        height: 50px;
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgb(210, 210, 210);

        &:hover {
          background: rgb(60, 60, 60);
        }

        > svg {
          font-size: 20px;
        }

        > span {
          font-size: 12px;
          margin-top: 5px;
        }
      }

      &__hidden-button {
        @include drop-down_button();
        bottom: 0;
        background: rgb(51, 51, 51);
        transform: translate(-50%, 0) rotate(180deg);
      }
    }

    .drop-down-button {
      @include drop-down_button();
      top: $toolBarHeight;
      background: rgb(18, 18, 18);
      z-index: 10;
    }
  }

  &__main {
    .tab__content {
      height: calc(100vh - #{$toolBarHeight} - 2px); // 整个窗口上下border 1px x 2 加上 toolbar $toolbarHeight
      overflow: auto;
    }
  }
}

</style>
